/*
 * @Description: 
 * @Author: 邢
 * @Date: 2021-04-22 19:36:29
 * @LastEditTime: 2021-04-26 19:31:40
 * @LastEditors: 邢
 */
import React, { useEffect, useState } from 'react'
//mobx
import { observer } from "mobx-react-lite"
//获取仓库里面的数据模块
import usestore from '@/context/useStore'
//less
import styles from "./cooranDetail.less"
//引入路由插件
import { useHistory,useLocation } from "umi"
//ts
import { IbookItem,Iallbooks } from "@/utils/interface/cooran"
//引入制作时间的方法
import { timeAgo,chinaTime } from "@/utils/timemade/time"

interface Iprops{
    match:any
}
function CooranDetail(props:Iprops) {
    const { cooran } = usestore();
    const history = useHistory();

    // const [allbooks,setallbooks] = useState<Iallbooks[]>([]);
    const [Id,setId] = useState<string>('')
    const [other,setOther] = useState<Iallbooks[]>([])

    useEffect(()=>{
        cooran.getBookItem(props.match.params.id);

        setId(props.match.params.id)
    },[])
    useEffect(()=>{
        if(cooran.allBooks.length){
            let newarr = cooran.allBooks.filter(item=>item.id !== props.match.params.id);
            setOther(newarr)
        }
    },[cooran.allBooks])
    useEffect(()=>{
        if(cooran.allBooks.length){
            cooran.getBookItem(Id);
            let newarr = cooran.allBooks.filter(item=>item.id !== Id);
            setOther(newarr)
        }
    },[Id])

    return (
        <div className={styles.detail}>
            { cooran.bookItem&&<p><span onClick={()=>history.go(-1)}>知识笔记 </span>/ {cooran.bookItem.title}</p>}
           <div className={styles.con}>
            {
                cooran.bookItem && cooran.bookItem.children &&<div className={styles.left}>
                        <p>{cooran.bookItem.title}</p>
                        <div className={styles.main}>
                            <img src={cooran.bookItem.cover} alt=""/>
                            <div>
                                <p>{cooran.bookItem.title}</p>
                                <p>{cooran.bookItem.summary}</p>
                                <p>{cooran.bookItem.views}次阅读·{chinaTime((cooran.bookItem.publishAt as string))}</p>
                                <p><button className={styles.btn} onClick={()=>history.push(`/index/cooranText/${Id}/${JSON.parse(JSON.stringify(cooran.bookItem)).children[0].id}`)}>开始阅读</button></p>
                            </div>
                            <ul>
                                {
                                    (cooran.bookItem.children as []).map((item:Iallbooks)=>{
                                        return <li key={item.id} onClick={()=>history.push(`/index/cooranText/${Id}/${item.id}`)}>
                                            <p><span>{item.title}</span></p>
                                            <p className={styles.meng}>
                                                <span>{item.title}</span>
                                                <span>{chinaTime(item.publishAt)}
                                                    <svg viewBox="64 64 896 896" focusable="false"  data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                                        <path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 0 0 0-48.4z"></path>
                                                    </svg>
                                                </span>
                                            </p>
                                        </li>
                                    })
                                }
                            </ul>
                        </div>
                    </div>
            }
           <div className={styles.right}>
                <p>其他知识笔记</p>
                <div>
                    {
                        other.length&&other.map((item:Iallbooks)=>{
                            return <div key={item.id} className={styles.items} onClick={()=>setId(item.id)}>
                            <img src={item.cover} alt=""/>
                            <div>
                              <p>{item.title}</p>
                              <p>{item.summary}</p>
                              <p>{item.views}次阅读.大约{timeAgo(item.publishAt)}前</p>
                            </div>
                        </div>
                        })
                    }
                </div>
           </div>
         </div>
        </div>
    )
}

export default observer(CooranDetail)
